<template>
  <el-card class="content">
    <el-form inline>
      <el-form-item label="开始时间">
        <el-date-picker
          type="datetime"
          placeholder="选择开始日期"
          default-time="00:00:00"
          size="mini"
          v-model="startTime"
          :picker-options="pickerOptions0"
          clearable
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          type="datetime"
          placeholder="选择结束日期"
          default-time="00:00:00"
          size="mini"
          v-model="endTime"
          :picker-options="pickerOptions0"
          clearable
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="监测类型:">
        <el-select
          v-model="query.monitorTypeId"
          clearable
          placeholder="请选择监测类型"
          size="mini"
        >
          <el-option
            v-for="item in monitorTypeList"
            :key="item.monitorTypeId"
            :value="item.monitorTypeId"
            :label="item.monitorTypeName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="mini"
          @click="getWarningStatisticalTrend"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <p v-show="warningStatisticalTrendShow" style="text-align: center">
      暂无数据
    </p>
    <div
      id="WarningStatisticalTrend"
      v-show="warningStatisticalTrendShows"
      style="height: 73vh"
    ></div>
  </el-card>
</template>

<script>
import echarts from "echarts";
import { getMonitoringTypeAll } from "../../../api/api";

import { getWarningStatisticalTrend } from "../../../api/risk-dynamic-judgement";
import moment from "moment";
export default {
  name: "MonitorSystemManagement",
  props: {
    node: Object,
  },
  data() {
    return {
      endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
      startTime: moment().subtract(1, "months").format("YYYY-MM-DD 00:00:00"),
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now(); //如果没有后面的-8.64e6就是不可以选择今天的
        },
      },
      query: {
        page: 1,
        pagesize: 10,
        monitorTypeId: "",
      },
      warningStatisticalTrendShow: false,
      warningStatisticalTrendShows: true,
      dryList: [],
      waterList: [],
      surfaceList: [],
      internalList: [],
      phreaticList: [],
      precipitationList: [],
      myChart: null,
      monitorTypeList: [],
    };
  },

  mounted() {
    this.getMonitoringTypeAll();
  },
  methods: {
    // 获取监测类型及监测
    async getMonitoringTypeAll() {
      const res = await getMonitoringTypeAll({
        tailingPondId: sessionStorage.getItem("sensorId"),
      });
      this.monitorTypeList = res.parameter;
      if (this.monitorTypeList[0]) {
        this.query.monitorTypeId = this.monitorTypeList[0].monitorTypeId;
        this.query.monitorCode = this.monitorTypeList[0].monitorCode;
      }
      this.getWarningStatisticalTrend();
    },
    async getWarningStatisticalTrend() {
      var myChart = echarts.init(
        document.getElementById("WarningStatisticalTrend")
      );
      myChart.showLoading();
      let queryData = {
        startTime: moment(this.startTime).format("YYYY-MM-DD 00:00:00"),
        endTime: moment(this.endTime).format("YYYY-MM-DD HH:mm:ss"),
      };
      const res = await getWarningStatisticalTrend({
        startTime: queryData.startTime,
        endTime: queryData.endTime,
        monitorTypeId: this.query.monitorTypeId,
        tailingPondId: sessionStorage.getItem("sensorId"),
      });
      if (res.resultCode == 200) {
        this.warningStatisticalTrendShow = false;
        this.warningStatisticalTrendShows = true;

        var equipmentDate = [];
        var oneCountDate = [];
        var twoCountDate = [];
        var threeCountDate = [];
        var fourCountDate = [];
        var warnTime = [];
        for (let i = 0; i < res.parameter.length; i++) {
          var obj1 = new Object();
          obj1.value = res.parameter[i].equipmentCount;
          equipmentDate[i] = obj1;
          var obj2 = new Object();
          obj2.value = res.parameter[i].oneCount;
          oneCountDate[i] = obj2;
          var obj3 = new Object();
          obj3.value = res.parameter[i].twoCount;
          twoCountDate[i] = obj3;
          var obj4 = new Object();
          obj4.value = res.parameter[i].threeCount;
          threeCountDate[i] = obj4;
          var obj5 = new Object();
          obj5.value = res.parameter[i].fourCount;
          fourCountDate[i] = obj5;
          var obj6 = new Object();
          obj6.value = res.parameter[i].warnTime;
          warnTime[i] = obj6;
        }
        var maxEquipmentCount = Math.max.apply(
          null,
          equipmentDate.map(function (o) {
            return o.value;
          })
        );
        var maxOneCount = Math.max.apply(
          null,
          oneCountDate.map(function (o) {
            return o.value;
          })
        );
        var maxTwoCount = Math.max.apply(
          null,
          twoCountDate.map(function (o) {
            return o.value;
          })
        );
        var maxThreeCount = Math.max.apply(
          null,
          threeCountDate.map(function (o) {
            return o.value;
          })
        );
        var maxFourCount = Math.max.apply(
          null,
          fourCountDate.map(function (o) {
            return o.value;
          })
        );
        var maxList = [];
        maxList.push(
          maxEquipmentCount,
          maxOneCount,
          maxTwoCount,
          maxThreeCount,
          maxFourCount
        );
        var max = Math.max.apply(
          null,
          maxList.map(function (o) {
            return o;
          })
        );
        var minEquipmentCount = Math.min.apply(
          null,
          equipmentDate.map(function (o) {
            return o.value;
          })
        );
        var minOneCount = Math.min.apply(
          null,
          oneCountDate.map(function (o) {
            return o.value;
          })
        );
        var minTwoCount = Math.min.apply(
          null,
          twoCountDate.map(function (o) {
            return o.value;
          })
        );
        var minThreeCount = Math.min.apply(
          null,
          threeCountDate.map(function (o) {
            return o.value;
          })
        );
        var minFourCount = Math.min.apply(
          null,
          fourCountDate.map(function (o) {
            return o.value;
          })
        );
        var minList = [];
        minList.push(
          minEquipmentCount,
          minOneCount,
          minTwoCount,
          minThreeCount,
          minFourCount
        );
        var min = Math.min.apply(
          null,
          minList.map(function (o) {
            return o;
          })
        );
        let chartOption = {
          tooltip: {
            trigger: "axis",
            formatter(params) {
              let tip = params[0].name + "<br/>";
              for (let y = 0; y < params.length; y++) {
                tip +=
                  params[y].marker +
                  params[y].seriesName +
                  " : " +
                  params[y].value +
                  "件<br/>";
              }
              return tip;
            },
          },
          color: ["#00DD00", "#CC0000", "#FF8800", "#EEEE00", "#00DDDD"],
          legend: {
            data: [
              { name: "设备预警", icon: "line" },
              { name: "数据红色预警", icon: "line" },
              { name: "数据橙色预警", icon: "line" },
              { name: "数据黄色预警", icon: "line" },
              { name: "数据蓝色预警", icon: "line" },
            ],
            top: "8px",
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            right: "5%",
            show: true,
            feature: {
              saveAsImage: { show: true },
            },
          },
          xAxis: {
            type: "category",
            name: "时间",
            nameLocation: "center",
            nameTextStyle: {
              padding: [15, 0, 0, 0], // 四个数字分别为上右下左与原位置距离
            },
            boundaryGap: false,
            data: warnTime,
          },
          yAxis: {
            name: "个数/" + "件",
            type: "value",
            minInterval: 1,
            max: Math.ceil(max * 1.2),
            min: Math.ceil( -0.6 * max),
          },
          series: [
            {
              name: "设备预警",
              type: "line",
              yAxisIndex: 0,
              lineStyle: {
                color: "#00DD00",
              },
              data: equipmentDate,
              smooth: false,
            },
            {
              name: "数据红色预警",
              type: "line",
              yAxisIndex: 0,
              lineStyle: {
                color: "#CC0000",
              },
              data: oneCountDate,
              smooth: false,
            },
            {
              name: "数据橙色预警",
              type: "line",
              yAxisIndex: 0,
              lineStyle: {
                color: "#FF8800",
              },
              data: twoCountDate,
              smooth: false,
            },
            {
              name: "数据黄色预警",
              type: "line",
              yAxisIndex: 0,
              lineStyle: {
                color: "#EEEE00",
              },
              data: threeCountDate,
              smooth: false,
            },
            {
              name: "数据蓝色预警",
              type: "line",
              yAxisIndex: 0,
              lineStyle: {
                color: "#00DDDD",
              },
              data: fourCountDate,
              smooth: false,
            },
          ],
        };
        myChart.hideLoading();
        myChart.setOption(chartOption, true);
        setTimeout(function () {
          window.onresize = function () {
            myChart.resize();
          };
        }, 200);
      } else {
        this.warningStatisticalTrendShow = true;
        this.warningStatisticalTrendShows = false;
      }
    },
  },
  //数据自动刷新，必然需要一个监听机制告诉Echarts重新设置数据
  watch: {
    //观察option的变化
    chartOption: {
      handler(newVal, oldVal) {
        if (this.myChart) {
          if (newVal) {
            this.myChart.setOption(newVal);
          } else {
            this.myChart.setOption(oldVal);
          }
        } else {
          myChart.setOption(chartOption);
        }
      },
      deep: true, //对象内部属性的监听，关键。
    },
  },
};
</script>



<style scoped>
.content {
  height: 88vh;
  margin-left: 0.07rem;
}
</style>
